<template>
	<view class="box">
		<view class="header">
			<image src="../../../static/img/quickly/medicalReport/toView.png" style="width: 311px;"></image>
			<view class="information">
				<view class="top">
					<view>会员：{{data.userName}}</view>
					<view>年龄：{{userInfo.age}}岁</view>
					<view>性别：{{userInfo.sex == 2?'女':'男'}}</view>
				</view>
				<view class="bottom">
					<view>签发人：{{data.healthName}}</view>
					<view>签发日期：{{data.modifiedDate && data.modifiedDate.substr(0,10) || data.createdDate && data.createdDate.substr(0,10)}}</view>
				</view>
			</view>
		</view>
		<view class="two"></view>
		<view class="three"></view>
		
		<view class="addassess">
			<div class="bd">
				<div  class="table">
					<div class="title">体检基本项目检测结果</div>
					<table class="basic">
						<tr>
							<td>名称</td>
							<td>单位</td>
							<td>结果</td>
						</tr>
						<tr v-for="(item,index) in enterData" :key="index">
							<td>{{item.inputName}}</td>
							<td>{{item.inputCompany}}</td>
							<td>{{data[item.name] == '-1'?'未检测':data[item.name] }}</td>
						</tr>
					</table>
				</div>
				<div class="secondTable">
					<div class="title">辅助检查项目</div>
					<table class="basic">
						<tr v-for="(item,index) in auxiliaryData" :key="'a'+index">
							<td>{{item.name}}</td>
							<td>{{item.value == '-1'?'未检测':item.value}}</td>
						</tr>
						<tr v-for="(aitem,aindex) in parameterValues" :key="'b'+aindex">
							<td>{{aitem.name}}</td>
							<td class="delStyle">{{aitem.value}}</td>	
						</tr>
					</table>
				</div>
				<div class="dx-warp" v-if="isCheckDxData && isCheckDxData.length > 0">
					<div class="title">单项数据体检</div>
					<div v-if="isCheckDxData && isCheckDxData.length > 0">
						<wyb-table ref="table" :headers="dialogHeaders3" :contents="isCheckDxData" @callbackdata="dxgetcallbackdata" />
					</div>
				</div>
			</div>
		</view>
		 <!-- v-if="!data.url " -->
		<div class="medical" @click="medicalReport" v-if="!data.url">生成评估</div>
		<div id="pic">
			<div class="title1">指标趋势</div>
			<div class="title2"><i></i>体重指数BMI</div>
			<div id="main" style="height: 400px;"></div>
			<div class="title2"><i></i>血脂</div>
			<div id="main1" style="height: 400px;"></div>
		</div>
		<div id="pic2">
			<div class="title2"><i></i>血压</div>
			<div id="bloodPressure" style="height: 420px;"></div>
			<div class="title2"><i></i>空腹血糖</div>
			<div id="bloodGlucose" style="height: 420px;"></div>
		</div>
		<!-- <image :src="base64"></image> -->
		<!-- <image :src="base642"></image> -->
	</view>
</template>

<script>
	import {getUrlParam,filterData2,age} from '@/static/js/filter.js'
	import html2canvas from 'html2canvas'
	export default{
		data () {
			return {
				base64:'',
				base642:'',
				userInfo:{},
				details: {},
				enterData:[{
					inputName:'身高',
					inputCompany:'cm',
					inputData:'',				
					name:'height'
				},{
					inputName:'体重',
					inputCompany:'kg',
					inputData:'',
					name:'weight'
				},{
					inputName:'体质指数',
					inputCompany:'kg/m²',
					inputData:'',
					name:'bodyIndex'
				},{
					inputName:'心率',
					inputCompany:'次/分',
					inputData:'',
					name:'heartRate'
				},{
					inputName:'血压',
					inputCompany:'mmHg',
					inputData:'',				
					name:'bloodPressure'
				},{
					inputName:'腰围',
					inputCompany:'cm',
					inputData:'',
					name:'waist'
				},
				{
					inputName:'空腹血糖',
					inputCompany:'mmol/L',
					inputData:'',
					name:'bloodGlucose'
				},{
					inputName:'白细胞计数',
					inputCompany:'10/L',
					inputData:'',
					name:'whiteCell'
				},{
					inputName:'红细胞计数',
					inputCompany:'10¹²/L',
					inputData:'',
					name:'redCell'
				},{
					inputName:'血红蛋白',
					inputCompany:'g/L',
					inputData:'',
					name:'hemoglobin'
				},{
					inputName:'血小板计数',
					inputCompany:'109/L',
					inputData:'',
					name:'plateletCount'
				},{
					inputName:'总胆固醇',
					inputCompany:'mmol/L',
					inputData:'',
					name:'cholesterol'
				},{
					inputName:'三酰甘油',
					inputCompany:'mmol/L',
					inputData:'',
					name:'triacylglycerol'
				},{
					inputName:'低密度脂蛋白胆固醇',
					inputCompany:'mmol/L',
					inputData:'',
					name:'lowCholesterol'
				},{
					inputName:'高密度脂蛋白胆固醇',
					inputCompany:'mmol/L',
					inputData:'',
					name:'highCholesterol'
				},{
					inputName:'谷丙转氨酶',
					inputCompany:'U/L',
					inputData:'',
					name:'aminotransferase'
				},{
					inputName:'总胆红素',
					inputCompany:'umol/L',
					inputData:'',
					name:'bilirubin'
				},{
					inputName:'血尿素氮',
					inputCompany:'mmol/L',
					inputData:'',
					name:'bloodUreaNitrogen'
				},{
					inputName:'血肌酐',
					inputCompany:'umol/L',
					inputData:'',
					name:'bloodMuscle'
				},{
					inputName:'血尿酸',
					inputCompany:'umol/L',
					inputData:'',
					name:'bloodUricAcid'
				}],
				auxiliaryData:[{
					name:'心电图',
					value:''
				},{
					name:'腹部超声',
					value:''
				},{
					name:'X线胸片',
					value:''
				}],
				data:{},
				status:'',
				parameterValues:[],
				isCheckDxData:[],
				id:'',
				// 异常体检表头
				dialogHeaders3:[
					{
						label: '名称',
						key:'name',
						width: 200,
					},
					{
						label: '结果',
						key:'input',
						width: 150,
					},
					{
						label: '参考范围',
						key:'va',
						width: 200,
					},
					{
						label: '单位',
						key:'units',
						width: 200,
					}
				],
			}
		},
		mounted() {
			this.id = getUrlParam('id');
			if(this.id) {
				this.$api.HealthExaminationReportDetails(this.id).then((res) => {
					if(res.data.returnCode == 200) {
						const New = res.data.result.newExaminationReportRes
						const Old = res.data.result.oldExaminationReport
						this.userName = New.userName;
						this.organ = New.organ;
						this.examinationDate = New.examinationDate;
						this.data = New;
						this.userId = New.userId
						this.auxiliaryData = JSON.parse(New.auxiliaryExamination);
						this.$api.findByUserId(New.userId).then((ares)=>{
							this.userInfo = ares.data.result
							
						})
						this.isCheckDxData = New.individuals
						const bodyIndexData = Old.bodyIndex ? [New.bodyIndex == -1 ? '' : New.bodyIndex,Old.bodyIndex == -1 ? '' : Old.bodyIndex] : [New.bodyIndex == -1 ? '' : New.bodyIndex]
						const Date = Old.examinationDate ? [New.examinationDate == -1 ? '' : New.examinationDate,Old.examinationDate == -1 ? '' : Old.examinationDate] : [New.examinationDate == -1 ? '' : New.examinationDate]
						this.echarts1(Date,bodyIndexData)
						// 图2
						const TC = Old.cholesterol ? [New.cholesterol == -1 ? '' : New.cholesterol,Old.cholesterol == -1 ? '' : Old.cholesterol] : [New.cholesterol == -1 ? '' : New.cholesterol]
						const TG = Old.triacylglycerol ? [New.triacylglycerol == -1 ? '' : New.triacylglycerol,Old.triacylglycerol == -1 ? '' : Old.triacylglycerol] : [New.triacylglycerol == -1 ? '' : New.triacylglycerol]
						const HDLC = Old.highCholesterol ? [New.highCholesterol == -1?'':New.highCholesterol,Old.highCholesterol == -1 ? '' : Old.highCholesterol] : [New.highCholesterol == -1?'':New.highCholesterol]
						const LDLC = Old.lowCholesterol ? [New.lowCholesterol == -1? '' : New.lowCholesterol,Old.lowCholesterol == -1? '' : New.lowCholesterol] : [New.lowCholesterol == -1? '' : New.lowCholesterol]
						const hemoglobin =  Old.hemoglobin ? [New.hemoglobin == -1 ? '' : New.hemoglobin,Old.hemoglobin] : [New.hemoglobin == -1 ? '' : New.hemoglobin]
						const bloodPressure =  
							Old.bloodPressure ?  
								[[New.bloodPressure.split('/')[0],New.bloodPressure.split('/')[1] ? New.bloodPressure.split('/')[1] : '-1'],[Old.bloodPressure.split('/')[0],Old.bloodPressure.split('/')[1] ? Old.bloodPressure.split('/')[1] : '-1']]
							:
								[[New.bloodPressure.split('/')[0],New.bloodPressure.split('/')[1] ? New.bloodPressure.split('/')[1] : '-1']]
						console.log(bloodPressure)
						this.echarts2(Date,TC,TG,HDLC,LDLC)
						this.bloodPressureTable(Date,bloodPressure)
						this.bloodGlucoseTable(Date,hemoglobin)
					}
				})
			}
		},
		methods:{
			age,
			filterData2,
			echarts1(Date,bodyIndexData){
				// 图1
				var chartDom = document.getElementById('main');
				var myChart = this.$echarts.init(chartDom);
				var option;
				option = {
				    xAxis: {
				        type: 'category',
				        data: Date
				    },
				    yAxis: {
						min:0,
						max:bodyIndexData.sort()[1]+10,
						show: true,
				        type: 'value',
						axisLine:{
							lineStyle:{color:{y: 0,y2: 1,type: 'linear',colorStops: [{offset: 0, color: '#FF0000'},{offset: 0.3, color: '#F39800'},{offset: 0.6, color: '#3DB51C'},{offset: .8, color: '#3366FF'}],}},
						}
				    },
				    series: [{
				        data: bodyIndexData,
				        type: 'line',
						symbol:'circle',
						itemStyle : {
							normal: {
								label : {show: true},
								width:1,//折线宽度
								color:"#CCCCCC"//折线颜色
							},
						}
				    }]
				};
				option && myChart.setOption(option);
			},
			echarts2(Date,TC,TG,HDLC,LDLC){
				// 图1
				var chartDom = document.getElementById('main1');
				var myChart = this.$echarts.init(chartDom);
				var option;
				option = {
				    tooltip: {
				        trigger: 'axis'
				    },
				    legend: {
				        data: ['TC', 'TG', 'HDL-C', 'LDL-C']
				    },
				    xAxis: {
				        type: 'category',
				        data: Date
				    },
				    yAxis: {
						min:0,
						max:10,
				        type: 'value'
				    },
				    series: [
				        {name: 'TC',type: 'line',data: TC,itemStyle : {normal: {label : {show: true},},}},
				        {name: 'TG',type: 'line',data: TG,itemStyle : {normal: {label : {show: true},},}},
				        {name: 'HDL-C',type: 'line',data: HDLC,itemStyle : {normal: {label : {show: true},},}},
				        {name: 'LDL-C',type: 'line',data: LDLC,itemStyle : {normal: {label : {show: true},},}}
				    ]
				};
				option && myChart.setOption(option);
			},
			bloodPressureTable(Date,bloodPressure) {
			    //血压
			    var chartDom = document.getElementById('bloodPressure');
			    var myChart = this.$echarts.init(chartDom);
			    var option;
			    option = {
					legend: {data: ['收缩压', '舒张压'],right:'3%',},
					xAxis: {
						type: 'category',
						data: Date
					},
					yAxis: {type: 'value',splitLine:{lineStyle:{type: "dashed"}}},
					grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},
					color: ['#FAC44A', '#3FAAEE'],
					series: [
						{name: '收缩压',type: 'line',stack: '总量',data: bloodPressure[0],itemStyle : {normal: {label : {show: true},}}},
						{name: '舒张压',type: 'line',stack: '总量',data: bloodPressure[1],itemStyle : {normal: {label : {show: true},}}}
					]
			    }
			    option && myChart.setOption(option);
			},
			bloodGlucoseTable(Date,hemoglobin) {
				//血糖
				var chartDom = document.getElementById('bloodGlucose');
				var myChart = this.$echarts.init(chartDom);
				var option;
				option = {
					legend: {data: ['空腹血糖'],right:'3%',},
					xAxis: {type: 'category',data: Date},
					yAxis: {type: 'value',splitLine:{lineStyle:{type: "dashed"}}},
					color: ['#EC5555'],
					series: [{name: '空腹血糖',type: 'line',stack: '总量',data: hemoglobin,itemStyle : {normal: {label : {show: true},}}}]
				}
				option && myChart.setOption(option);
			},
			toImg(dom) {
				var dom = dom // 获取dom元素
				return new Promise((resolve,reject)=>{
					// 使页面滑到顶部，避免顶部出现白边
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 0
					})
					html2canvas(dom, {
						width: dom.clientWidth, //dom 原始宽度
						height: dom.clientHeight,
						scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
						scrollX: 0,
						useCORS: true, //支持跨域，但好像没什么用
					}).then((canvas) => {
						// 将生产的canvas转为base64图片
						if(dom.attributes[1].nodeValue == 'pic'){
							this.base64 = canvas.toDataURL('image/png')
						}else{
							this.base642 = canvas.toDataURL('image/png')
						}
						resolve(true)
					});
				})
			},
			medicalReport() {
				const _this = this;
				_this.toImg(document.querySelector('#pic')).then((a)=>{
					var arr = _this.base64.split(',')
					var mime = arr[0].match(/:(.*?);/)[1]
					var bstr = atob(arr[1]) 
					var nn = bstr.length 
					var u8arr = new Uint8Array(nn);
					while(nn--){
						u8arr[nn] = bstr.charCodeAt(nn);
					}
					var obj1 = new Blob([u8arr], {type:mime});
					_this.toImg(document.querySelector('#pic2')).then((a)=>{
						var arr = _this.base642.split(',')
						var mime = arr[0].match(/:(.*?);/)[1]
						var bstr = atob(arr[1]) 
						var nn = bstr.length 
						var u8arr = new Uint8Array(nn);
						while(nn--){
							u8arr[nn] = bstr.charCodeAt(nn);
						}
						var obj2 = new Blob([u8arr], {type:mime});
						_this.$api.HealthExaminationReportUploadWord({fileOne:obj1,fileTwo:obj2},_this.id,_this.userId).then((res) => {
							if(res.returnCode == 200) {
								uni.showToast({
									title:'体检报告生成成功',
									icon:'none'
								})
								_this.data.url = res.result && res.result.url;
								window.open('http://health.jlm12580.com/web/viewer.html?file='+res.result.url)
							}
						})
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/quickly/referral/toView.scss';
	@import '@/static/css/quickly/medicalReport/entryMedical.scss';
	#pic,#pic2{
		width: 800px;
		position: absolute;
		top: -10000px;
		.title1{
			font-size: 48rpx;
			color: #00B25C;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
		.title2{
			background: #00C481;
			color: #fff;
			font-size: 33rpx;
			display: flex;
			align-items: center;
			padding: 10rpx 0 10rpx 15rpx;
			i{
				display: inline-block;
				width: 5rpx;
				height: 16rpx;
				background: #fff;
				margin-right: 15rpx;
			}
		}
	}
	table {
		border-spacing: 0;
	}
		.addassess{
			margin-top: 30rpx;
			background-color: #FFFFFF;
			.title{
				padding:15upx 0;
				text-align: center;
				font-size: 28upx;
				color: #fff;
				background: #38CB97;
				position: relative;
				span{
					position: absolute;
					padding:8upx 12upx;
					background: #D0FFEE;
					right: 28upx;
					top: 8upx;
					color: #000;
					font-size: 26upx;
				}
			}
			.hd{
					padding:24upx 0;
					display: flex;
					justify-content: space-between;
					width: 100%;
				.t{
					padding-left: 24upx;
					flex:1;
					font-size: 30upx;
					color: #333333;
					p{
						padding-right: 20upx;
						display: flex;
						margin-top: 10upx;
						align-items: center;
						input,uni-picker{
							flex:1;
							// width: 260upx;
							height: 50upx;
							border: 1upx solid #E4E4E4;
							border-radius: 6upx;
							padding-left: 10upx;
							min-height:unset;
							line-height: 50upx;
						}
					}
				}
				button{
					width: 132upx;
					height: 132upx;
					background: #38CB97;
					border-radius:16upx;
					color: #fff;
					line-height: 132upx;
					font-size: 30upx;
					margin-right: 24upx;
					&::after{
						border:none;
					}
				}
			}
			.bd {
				.basic {
					width: 100%;
					// padding-bottom: 30upx;
					tr {
						display: flex;
						color: #333333;
						font-size: 28upx;
						width: 100%;
						td {
							display: flex;
							justify-content: center;
							align-items: center;
							flex: 1;
							text-align: center;
							border-right: 2px solid #FFFFFF;
							min-height: 60upx;
							// line-height: 60upx;
							input {
								width: 100%;
								font-size: 28upx;
								height: 100%;
							}
						}
						td:last-child {
							border: 0;
						}
					}
					.delImage {
						width: 22upx;
						height: 24upx;
						margin: auto 24upx auto 8upx;
					}
					.delStyle {
						display: flex;
					}
					tr:nth-child(odd) {
						background-color: #F6F7FB;
					}
					.addOther {
						margin-top: 20upx;
						width: 750upx;
						height: 60upx;
						line-height: 60upx;
						text-align: center;
						background: #F6F7FB;
						border-radius: 12upx;
						image {
							width: 26upx;
							height: 26upx;
							margin-right: 14upx;
						}
					}
				}
			}
		}
		.dialog{
			position: fixed;
			left: 0;
			top: 0;
			width: 100vw;
			height: 100vh;
			z-index: 100;
			.bg{
				width: 100vw;
				height: 100vh;
				position: absolute;
				left: 0;
				top: 0;
				background: rgba(0,0,0,.5);
			}
			.closeImage {
				position: fixed;
				bottom: 9%;
				left: 50%;
				transform: translateX(-50%);
				image {
					width: 42upx;
					height: 42upx;
				}
			}
			.content{
				padding:4% 3%;
				position: absolute;
				width: 88%;
				height: 862upx;
				left: 3%;
				top: 14%;
				background: #fff;
				.wyb-table-header{
					width: 400upx !important;
				}
				.search{
					display: flex;
					font-size: 28upx;
					align-items: center;
					margin-bottom: 30upx;
					input{
						height: 50upx;
						padding-left: 10upx;
						border: 1upx solid #E4E4E4;
						border-radius: 8upx;
						flex: 1;
						font-size: 28upx;
					}
					span{
						display: inline-block;
						padding: 8upx 18upx;
						color: #333333;
						margin-left: 20upx;
						border-radius: 8upx;
						background-color: #EBFFF8;
						font-size: 28upx;
					}
					.solidColor {
						background-color: #38CB97;
						color: #FFFFFF;
					}
					image{
						width: 40upx;
						margin-left: 40upx;
					}
				}
			}
			.btn{
				display: flex;
				justify-content: center;
				margin-top: 50upx;
				span{
					background: #F5F5F5;
					display: inline-block;
					margin: 0 60upx;
					width: 162upx;
					height: 54upx;
					text-align: center;
					line-height: 54upx;
					font-size: 26upx;
					border-radius:4upx;
					color: #333333;
					font-size: 28upx;
				}
			}
		}
		.yc-warp,.dx-warp{
			margin-bottom: 20upx;
			table{
				width: 100%;
				text-align: left;
				border-collapse:collapse;
				font-size: 24upx;
				th{
					padding:12upx;
					background: #e6f3ff;
					color: #333;
				}
				td{
					padding:12upx;
				}
			}		
		}
		.medical {
			width: 513upx;
			height: 70upx;
			background: #38CB97;
			border-radius: 35upx;
			margin: 94upx auto;
			color: #FFFFFF;
			font-size: 30upx;
			line-height: 70upx;
			text-align: center;
		}
</style>
